<template>
    <el-row class="tac">
        <div class="title">River</div>
        <el-col :span="24">
            <el-menu
                :default-active="defaultPath"
                active-text-color="#009688"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#20222A"
                text-color="#fff"
                router
				size='mini'
            >
                <div v-for="(item,index) in routes" :key="index">
                    <el-submenu :index="item.path" v-if="item.children">
                        <template slot="title">
                            <i :class="'el-icon-'+item.meta.icon"></i>
                            <span>{{item.meta.name}}</span>
                        </template>
                        <el-menu-item-group v-for="(childItem,index) in item.children" :key="index">
                            <el-menu-item
                                :index="true|formatRoute(item.path,childItem.path)"
                            >{{childItem.meta.name}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item :index="item.path" v-else>
                        <i :class="'el-icon-'+item.meta.icon"></i>
                        <span>{{item.meta.name}}</span>
                    </el-menu-item>
                </div>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script>
export default {
    data() {
        return {
            routes: [],
            defaultPath: ''
        };
    },
    computed: {},
    filters: {
        formatRoute(val, parentPath, childPath) {
            let str = '';
            if (parentPath === '/' && childPath === '/') {
                return '/';
            }
            str = parentPath === '/' ? '' : '/';
            return parentPath + str + childPath;
        }
    },
    created() {
        this.routes = this.$router.options.routes.filter(
            item => item.path !== '/login'
        );
        this.defaultPath = this.$store.state.route.path;
    },
    mounted() {},
    methods: {
        handleOpen(key, keyPath) {
            // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        }
    }
};
</script>

<style lang="scss">
.tac {
    .title {
        background-color: #20222a;
        color: rgba(255, 255, 255, 0.8);
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-bottom: 2px solid #23252b;
        font-weight: bold;
    }
}
</style>
